@import "@material/card/mdc-card";
@import "@material/button/mdc-button";
@import "@material/typography/mdc-typography";

.post-list {
  margin: 50px 0;

  .post-thumb-item {
    height: 300px;
    margin: 20px 10px;

    .primary-action {
      height: 100%;

      .content {
        height: 100%;
        width: 100%;
        display: -webkit-flex;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;

        &.reverse {
          flex-flow: row-reverse nowrap;
        }

        .post-info {
          width: 45%;
          height: 100%;
          display: -webkit-flex;
          display: flex;
          flex-flow: column nowrap;
          justify-content: space-between;

          .text {
            margin: 30px 30px 0;

            .post-title {
              margin: 0;
              color: $font-color-normal;
              overflow: hidden;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;

              a {
                color: $font-color-normal;
              }
            }

            .post-date,
            .post-meta {
              margin: 0;
              color: $font-color-light;
              font-size: 12px;

              i {
                font-size: 12px;
              }

              a {
                color: $font-color-light;
              }
            }

            .post-abstract {
              margin: 20px 0 0;
              color: $font-color-light;
              overflow: hidden;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 3;
            }

            a {
              text-decoration: none;
            }
          }

          .btn--align-left {
            margin: auto auto 30px 30px;
          }

          .btn--align-right {
            margin: auto 30px 30px auto;
          }
        }

        .post-thumb {
          width: 55%;
          overflow: hidden;

          .thumb-img-box {
            height: 100%;
            width: 100%;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              transition: all .6s;

              &:hover {
                transform: scale(1.1);
              }
            }
          }
        }
      }
    }
  }

  @media screen and (max-width: $tablet-min-width) {
    .post-thumb-item {
      height: auto;
      margin: 0;
      border-radius: 0;
      box-shadow: none;

      .primary-action {

        .content,
        .content.reverse {
          display: flex;
          flex-flow: column nowrap;

          .post-thumb {
            width: 100%;
            height: 300px;
          }

          .post-info {
            width: 100%;
            height: auto;

            .text {
              margin: 10px 20px;
            }

            .btn--align-right,
            .btn--align-left {
              margin: auto 20px 20px auto;
            }
          }
        }
      }
    }
  }
}